<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      title="新建项目"
      :destroyOnClose="true"
      :minHeight="300"
      @register="registerModal"
      @ok="handleSubmit"
    >
      <BasicForm @register="register" />
    </BasicModal>
    <!-- 新增项目模板弹窗 -->
    <addTemp @register="registerTempModal" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { createProjectApi } from '/@/api/demo/project';
  import { useUserStore } from '/@/store/modules/user';
  import addTemp from './addTemplate.vue';
  import { useModal } from '/@/components/Modal';
  import {
    projectManagerListApi,
    projectTemplateListApi,
    projectParticipantsListApi,
  } from '/@/api/demo/project';

  const useCommonStore = useUserStore();
  const { createMessage } = useMessage();
  const emit = defineEmits(['success', 'register']);

  const [register, { resetFields, validate }] = useForm({
    labelWidth: 100,
    schemas: [
      {
        field: 'name',
        component: 'Input',
        label: '项目名称',
        required: true,
        componentProps: {
          placeholder: '请输入项目名称',
        },
      },
      {
        field: 'product',
        component: 'ApiSelect',
        label: '项目模板',
        componentProps: {
          placeholder: '请输入项目模板',
          api: projectTemplateListApi,
          dropdownStyle: { maxHeight: '150px', overflow: 'auto' },
          labelField: 'templateName',
          valueField: 'id',
          showSearch: true,
          filterOption: (input, option) => {
            return option.label.indexOf(input.toLowerCase()) >= 0;
          },
          onChange: (e: ChangeEvent) => {
            if (e !== undefined) {
              openModal1(true);
            }
          },
        },
      },
      {
        field: 'participant',
        component: 'ApiTreeSelect',
        label: '项目参与人',
        required: true,
        componentProps: {
          placeholder: '请输入项目参与人',
          api: projectParticipantsListApi,
          multiple: true,
          dropdownStyle: { maxHeight: '150px', overflow: 'auto' },
          showSearch: true,
          filterTreeNode: (inputValue, treeNode) => {
            return treeNode.props.title.includes(inputValue);
          },
        },
      },
      {
        field: 'manager',
        component: 'ApiSelect',
        label: '项目负责人',
        required: true,
        componentProps: {
          placeholder: '请输入项目负责人',
          api: projectManagerListApi,
          dropdownStyle: { maxHeight: '120px', overflow: 'auto' },
          params: {
            userid: useCommonStore.userInfo?.userId,
          },
          labelField: 'name',
          valueField: 'userid',
          showSearch: true,
          filterOption: (input, option) => {
            return option.label.indexOf(input.toLowerCase()) >= 0;
          },
        },
      },
      {
        field: 'planTime',
        component: 'RangePicker',
        label: '计划起始时间',
        required: true,
      },
    ],
    fieldMapToTime: [['planTime', ['prestarttime', 'preEndTime'], 'YYYY-MM-DD']],
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });

  // 新增项目模板弹窗
  const [registerTempModal, { openModal: openModal1 }] = useModal();

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
    resetFields();
    setModalProps({ confirmLoading: false });
  });

  async function handleSubmit() {
    try {
      const values = await validate();
      setModalProps({ confirmLoading: true });
      await createProjectApi(values);
      closeModal();
      emit('success');
      createMessage.success('创建成功');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang="less" scoped>
  ::v-deep(.rc-virtual-list-scrollbar-thumb) {
    visibility: hidden !important;
  }

  ::v-deep(.ant-calendar-picker) {
    width: 100% !important;
  }
</style>
